<template>
  <view class="index">
    <Banner :imgs="detail.imgs" />
    <Detail :car="detail" />
    <view class="bottom-btn" v-show="isShowPhone">
      <view class="bottom-fl" @tap="report">
        <view style="height:30px;"><van-icon name="bulb-o" size="30px" /></view>
        <view class="rep-view"><text>&nbsp;举报</text></view>
      </view>
      <view class="bottom-fr">
        <button @tap="contactPhone">电话联系</button>
      </view>
    </view>
    <view class="bottom-btn" v-show="isShowDock">
      <button class="dock-btn" @tap="dockSuccess">
        对接成功
      </button>
    </view>
    <van-dialog id="van-dialog" />
  </view>
</template>

<script>
import Banner from '@components/business/resource/detail/banner'
import Detail from '@components/business/resource/detail/detail'
import { getResourceDetail, dockResource } from '@requests/business'
import { navigateTo, call, getParam, toast, goBack } from '@utils/index'
import Dialog from '@components/vant-weapp/dist/dialog/dialog'
import store from '../../../../store/index'

export default {
  name: 'ResourceDetail',
  data() {
    return {
      detail: {
        imgs: []
      },
      imgList: [],
      user_id: store.state.user.userInfo.user_id || ''
    }
  },
  components: {
    Banner,
    Detail
  },
  computed: {
    isShowDock() {
      return (
        this.detail.user_id == this.user_id && this.detail.docking_status == '2'
      )
    },
    isShowPhone() {
      return this.detail.user_id != this.user_id
    }
  },
  onShareAppMessage() {
    return {
      title: '车商车源'
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    //联系
    contactPhone() {
      call(this.detail.contact_mobile)
    },
    //获取车源详情
    getDetail() {
      getResourceDetail(getParam('carshop_car_id')).then(res => {
        this.detail = res && res.result
      })
    },
    //举报
    report() {
      navigateTo('business/resource/report', {
        carshop_car_id: getParam('carshop_car_id')
      })
    },
    //对接成功
    dockSuccess() {
      Dialog.confirm({
        title: '提示',
        message: '是否停止车源？'
      })
        .then(() => {
          dockResource({ carshop_car_id: getParam('carshop_car_id') }).then(
            res => {
              toast.success('操作成功').then(() => {
                goBack()
              })
            }
          )
        })
        .catch(() => {})
    }
  }
}
</script>

<style>
.rep-view {
  height: 24rpx;
}
.rep-view text {
  display: block;
  font-size: 24rpx;
  line-height: 24rpx;
}
.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.625rem 0.8rem;
  background: #fff;
  clear: both;
  z-index: 99;
}
.bottom-btn .bottom-fl {
  width: 20%;
  float: left;
}
.bottom-btn .bottom-fr {
  width: 80%;
  float: left;
}
.bottom-btn button {
  width: 100%;
  background-color: #fff;
  border: 2px solid #006cff;
  border-radius: 12px;
  color: #006cff;
  font-size: 1.02rem;
}
.bottom-btn button.dock-btn {
  background-color: #006cff;
  color: #fff;
}
</style>
